<template>
  <div>
    <div class="sub-name name-box" id="low-name"><span>网站地图</span></div>
    <div class="website-box">
      <ul class="website-nav">
        <li class="website-nav-class"><nuxt-link to="/">首页</nuxt-link></li>
      </ul>
      <ul class="website-nav">
        <li class="website-nav-class"><nuxt-link to="/mainPage/tfn">天赋能</nuxt-link></li>
        <li><nuxt-link to="/details/tfn/intro">产业介绍</nuxt-link></li>
        <li><nuxt-link to="/details/tfn/speech">总裁寄语</nuxt-link></li>
        <li><nuxt-link to="/details/tfn/team">领导团队</nuxt-link></li>
        <li><nuxt-link to="/details/tfn/culture">企业文化</nuxt-link></li>
        <li><nuxt-link to="/details/tfn/honor">企业资质</nuxt-link></li>
      </ul>
      <ul class="website-nav">
        <li class="website-nav-class"><nuxt-link to="/mainPage/layout">产业布局</nuxt-link></li>
        <li v-for="item in layoutList"><nuxt-link :to="'/details/layout/'+item.id">{{item.title}}</nuxt-link></li>
      </ul>
      <ul class="website-nav">
        <li class="website-nav-class"><nuxt-link to="/mainPage/tech">科技发展</nuxt-link></li>
        <li><nuxt-link to="/details/tech/platform">研发平台</nuxt-link></li>
        <li><nuxt-link to="/details/tech/base">产研基地</nuxt-link></li>
        <li><nuxt-link to="/details/tech/experts01">研发专家学者</nuxt-link></li>
        <li><nuxt-link to="/details/tech/experts02">医疗专家</nuxt-link></li>
        <li><nuxt-link to="/details/tech/experts03">产研团队</nuxt-link></li>
      </ul>
      <ul class="website-nav">
        <li class="website-nav-class"><nuxt-link to="/mainPage/news">新闻中心</nuxt-link></li>
      </ul>
      <ul class="website-nav">
        <li class="website-nav-class"><nuxt-link to="/mainPage/responsibility">社会责任</nuxt-link></li>
        <li v-for="item in respons"><nuxt-link :to="'/details/responsibility/'+item.id">{{item.title}}</nuxt-link></li>

      </ul>
      <ul class="website-nav">
        <li class="website-nav-class"><nuxt-link to="/mainPage/contact">联系我们</nuxt-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    async asyncData({$axios}){
      const layoutClass = await $axios.$get('http://tfngw.tfnhg.com/Api/New/get_cybj_class');
      const respons = await $axios.$get('http://tfngw.tfnhg.com/Api/adminWeb/get_shzr');
      let layoutList = [];
      for(let i in layoutClass){
        for(let j in layoutClass[i].content)
          layoutList.push(layoutClass[i].content[j])
      }
      layoutList = layoutList.sort(function(a,b) {
        return a.id-b.id;
      })
      return {layoutList,respons}
    },
  }
</script>

<style scoped>
  .website-box{
    display: flex;
    flex-flow: row wrap;
    /*justify-content: space-between;*/
  }
  .website-nav{
    width: 24%;
    /*height:3rem;*/
    background-color: #ebe2d0;
    margin-top: .4rem;
    margin-right: 1%;
  }
  .website-nav-class{
    background: #eadcc1;
  }
  .website-nav li{
    width: 100%;
    height:0.4rem;
    line-height: 0.4rem;
    text-align: center;
    border-bottom: 1px solid #fff;
  }
  .website-nav li a{
    display: block;
    width: 100%;
    height:0.4rem;
    color:#b1967a;
  }
  .website-nav li:hover a{
    color:#fff;
  }
</style>
